
<template>
	<div>
		<div>
			<div class="index-top">
				<el-row type="flex" class="row-bg" justify="space-around">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="left">
								<p class="title">注册量</p>
								今日{{xzke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-zhuce"></i></div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple bg-purple1">
							<div class="left">
								<p class="title">用户需求量</p>
								{{hfke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-xuqiu"></i></div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple bg-purple2">
							<div class="left">
								<p class="title">分配需求数</p>
								{{dfke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-renwufenpei"></i></div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple bg-purple3">
							<div class="left">
								<p class="title">未分配需求数</p>
								{{cjke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-icon-p_gongyingshangfenpei"></i></div>
						</div>
					</el-col>
				</el-row>
			</div>

			<div class="i-eachrt" style="margin-top: 20px;">
				<el-row type="flex" class="row-bg" justify="space-around">
			        <el-col :span="12">
			            <div class="contens"><div id="myChart2" :style="{width: '100%',}"></div></div>
			        </el-col>
			        <el-col :span="12">
			            <div class="contens"><div id="myChart3" :style="{width: '100%',}"></div></div>
			        </el-col>
			    </el-row>
		    	<el-row type="flex" class="row-bg" justify="space-around">
			        <el-col :span="12">
			            <div class="contens"><div id="myChart" :style="{width: '100%',}"></div></div>
			        </el-col>
			        <el-col :span="12">
			            <div class="contens"><div id="myChart1" :style="{width: '100%',}"></div></div>
			        </el-col>
			    </el-row>
		   </div>
		</div>
	</div>
</template>

<script>
	import api from '../../../api/api'
	export default {
		name: "index",
		data() {
			return {
				xzke: "", //注册量
				hfke: "", //用户需求量
				dfke: "", //分配需求数
				cjke: "", //未分配需求数
				MDemandLine: {}, //用户需求走趋图
				PDemandLine: {}, //商家需求走趋图
				PDemandChart: {}, //商家需求占比
				ProviderAllotChart: {}, //商家分配占比
			}
		},
		created() {
			this.$nextTick(function(){
				var topBarHei = $('.index-top').height()
				var hei = ($(window).height()-208-topBarHei)/2
				$('.contens>div').css("height",hei)
			})
			this.gethome(this.index)
		},
		methods: {
			gethome(){
				this.$axios.get(api.gethome).then(res => {
					if(res.data.isOK) {
						this.xzke = res.data.data.RegAmount
						this.hfke = res.data.data.MDemandAmount
						this.dfke = res.data.data.AllotAmount
						this.cjke = res.data.data.UnAllotAmount
						this.MDemandLine = res.data.data.MDemandLine //用户需求走趋图
						this.PDemandLine = res.data.data.PDemandLine //商家需求走趋图
						this.PDemandChart = res.data.data.PDemandChart //商家需求占比
						this.ProviderAllotChart = res.data.data.ProviderAllotChart //商家分配占比
						this.drawLine();
						this.drawLine1();
						this.drawCir()
						this.drawCir1()
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//商家需求走趋图
			drawLine(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.MDemandLine.Data.length;i++){
					proName.push(this.MDemandLine.Data[i].Name)	
					proNum.push(this.MDemandLine.Data[i].Value)	
				}
		        let myChart = this.$echarts.init(document.getElementById('myChart'));

		        myChart.setOption({
		            title: { text: '商家需求走趋图',
		            		x:"center",
		            		textStyle:{
				        	fontSize:'16',
				        }
		            },
		            tooltip: {},
		            xAxis: {
		                data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:this.max.apply(proNum)+10,
		            },
		            color: ['#247ba0'],
		            series: [{
		                name: '成交量'+this.MDemandLine.Total,
		                type: 'line',
		                data: proNum,
		                smooth:true,
		                areaStyle: {
		                	opacity:"0.1"
		                },
		                lineStyle:{
				            normal:{
				                width:2,  //连线粗细
				                color: "#569ab5"  //连线颜色
				            }
				        },
		            }]
		        });
		    },
		    //用户需求走趋图
			drawLine1(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.PDemandLine.Data.length;i++){
					proName.push(this.PDemandLine.Data[i].Name)	
					proNum.push(this.PDemandLine.Data[i].Value)	
				}
		        let myChart = this.$echarts.init(document.getElementById('myChart1'));

		        myChart.setOption({
		            title: { text: '用户需求走趋图',
		            		x:"center",
		            		textStyle:{
				        	fontSize:'16',
				        }
		            },
		            tooltip: {},
		            xAxis: {
		                type: 'category',
				        boundaryGap: false,
				        data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:this.max.apply(proNum)+10,
                		type: 'value'
		            },
		            color: ['#247ba0',],
		            series: [{
		                name: '需求量'+this.PDemandLine.Total,
		                type: 'line',
		                data: proNum,
		                smooth:true,
		                areaStyle: {
		                	  opacity:"0.1"
		                },
		                lineStyle:{
				            normal:{
				                width:2,  //连线粗细
				                color: "#569ab5"  //连线颜色
				            }
				        },
		            }]
		        });
		    },
		    //商家需求占比
		    drawCir(){
		    	var khName = []
		    	for(var i = 0;i<this.PDemandChart.Data.length;i++){
					khName.push({
						name:this.PDemandChart.Data[i].Name,
						value:this.PDemandChart.Data[i].Value	
					})
					
				}
		        // 基于准备好的dom，初始化echarts实例
		        let myChart1 = this.$echarts.init(document.getElementById('myChart2'))
		        // 绘制图表
		        myChart1.setOption({
		            title : {
				        text: '商家需求占比',
				        subtext: '',
				        x:'center',
				        textStyle:{
				        	fontSize:'16',
				        }
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
//				    legend: {
//				    },
				    color: ['#247ba0','#f3ffbd','#70c1b3','#b2dbbf','#f37050','#00b5fd'],
				    series : [
				        {
				            name: '',
				            type: 'pie',
				            radius : '60%',
				            center: ['50%', '50%'],
				            data:khName,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
		        });
		    },
		    //商家分配占比
		    drawCir1(){
		    	var khName = []
		    	for(var i = 0;i<this.ProviderAllotChart.Data.length;i++){
					khName.push({
						name:this.ProviderAllotChart.Data[i].Name,
						value:this.ProviderAllotChart.Data[i].Value	
					})
					
				}
		        // 基于准备好的dom，初始化echarts实例
		        let myChart1 = this.$echarts.init(document.getElementById('myChart3'))
		        // 绘制图表
		        myChart1.setOption({
		            title : {
				        text: '商家分配占比',
//				        subtext: '',
				        x:'center',
				        textStyle:{
				        	fontSize:'16',
				        }
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
//				    legend: {
//				    },
				    color: ['#247ba0','#f3ffbd','#70c1b3','#b2dbbf','#f37050','#00b5fd'],
				    series : [
				        {
				            name: '',
				            type: 'pie',
				            radius : '60%',
				            center: ['50%', '50%'],
				            data:khName,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
		        });
		    },
		}
	}
</script>
<style>
	.el-row {
		/*margin-bottom: 20px;*/
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
		margin-right: 10px;
		/*height: 70px;*/
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.bg-purple {
		background: #d3dce6;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.grid-content {
		border-radius: 4px;
		height: 100%;
	}
	
	.index-top .el-col .bg-purple {
		background: #70c1b3;
		border-radius: 5px;
		border: 1px solid #5eab9e;
	}
	.index-top .el-col{
		height: 80px
	}
	.index-top .el-col .bg-purple1 {
		background: #b2dbbf;
		border:1px solid #9bc4a8;
	}
	.index-top .el-col .bg-purple2 {
		background: #f3ffbd;
		border:1px solid #deeaa8;
	}
	.index-top .el-col .bg-purple3 {
		background: #eb547c;
		border:1px solid #cf4368
	}
	.index-top .el-col .bg-purple2 .left{
		color: #555c35;
	}
	.index-top .el-col .bg-purple2 .left .title{
		color: #555c35;
	}
	.index-top .el-col .bg-purple2 .right1 .iconfont{
		color: #555c35;
	}
	.left{
		width: 70%;
		float: left;
		box-sizing: border-box;
		padding-left: 30px;
		padding-top: 10px;
		font-size: 14px;
		color: #fff;
	}
	.left .title{
		font-size: 24px;
		color: #fff;
		margin-bottom: 5px;
	}
	.right1{
		width: 30%;
		float: right;
		text-align: center;
		line-height: 80px;
		height: 80px;
		font-size: 36px;
	}
	.right1 .iconfont{
		font-size: 36px;
		color: #fff;
	}
	.contens{
		border: 1px solid #cfdbe2;
		border-top-width: 3px;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		padding-top: 10px;
		/*padding-left: 15px;*/
		margin-bottom: 10px;
	}
</style>